<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=gauge-speed
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0;background-color: #000000;">
        <div id="container" style="height: 100%"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;



option = {
  series: [
    {
      type: 'gauge',
      progress: {
        show: true,
        width: 18
      },
      axisLine: {
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        length: 15,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 25,
        color: '#999',
        fontSize: 20
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 25,
        itemStyle: {
          borderWidth: 10,
          
        }
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        fontSize: 80,
        offsetCenter: [0, '70%']
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
};

option = {
	series:[
	  {
		type: "gauge",
		radius: '85%',
		center: ["50%", "63%"],
		// min: 0, //最小刻度
		// max: 100, //最大刻度
		// splitNumber: 5, //刻度数量
		splitNumber: 10,
		startAngle: 210,
		endAngle: -30,
		axisLine: {
		  show: false,
		  lineStyle: {
		    width: 5,
		    color: [[1, '#ffffff']]
		  },
		},
		axisTick: {
		  show: true,
		  distance: 0,
		  length: 8,
		  lineStyle: {
		    color: 'auto',
		    width: 3
		  }
		},
		//分隔线样式。
		splitLine: {
		  show: false,
		},
		axisLabel: {
		  show: false,
		},
		pointer: {
		  show: false,
		  length: "100%",
		  width: "10%",
		  offsetCenter: [10, 50],
		},
		//仪表盘详情，用于显示数据。
		detail: {
		  show: true,
		  offsetCenter: [0, "50%"],
		  textStyle: {
		    fontWeight: "bold",
		    fontSize: 25,
		    color: "#70f7ff"
		  },
		  
		  formatter: function (value) {
		    if (value >= 50) {
		      return "合格"
		    } else {
		      return "不合格"
		    }
		  }
		},
		data: [{
		  value: 80,
		},],
	},
	{
		type: "gauge",
		radius: '85%',
		center: ["50%", "63%"],
		// min: 0, //最小刻度
		// max: 100, //最大刻度
		// // splitNumber: 5, //刻度数量
		startAngle: 210,
		endAngle: 0,
		splitNumber: 10,
		axisLine: {
		  show: false,
		  lineStyle: {
		    width: 5,
		    color: [[1, '#c8000a']]
		  },
		},
		axisTick: {
		  show: true,
		  distance: 0,
		  length: 8,
		  lineStyle: {
		    color: 'auto',
		    width: 3
		  }
		},
		//分隔线样式。
		splitLine: {
		  show: false,
		},
		axisLabel: {
		  show: false,
		},
		pointer: {
		  show: false,
		  length: "100%",
		  width: "10%",
		  offsetCenter: [10, 50],
		},
		//仪表盘详情，用于显示数据。
		detail: {
		  show: true,
		  offsetCenter: [0, "50%"],
		  textStyle: {
		    fontWeight: "bold",
		    fontSize: 25,
		    color: "#70f7ff"
		  },
		  
		  formatter: function (value) {
		    if (value >= 50) {
		      return "合格"
		    } else {
		      return "不合格"
		    }
		  }
		},
		data: [{
		  value: 80,
		},],
	},
	]
}

var value = 0.8, // 值，0~1之间
	startAngle = 215, // 开始角度
	endAngle = -35, // 结束角度
	splitCount = 60, // 刻度数量
	pointerAngle = (startAngle - endAngle) * (1 - value) + endAngle; // 当前指针（值）角度
  // var myChart = echarts.init(document.getElementById('sample'));
option = {
	series: [
	          {
	            type: 'gauge',
	            radius: '90%',
	            startAngle: pointerAngle,
	            endAngle: endAngle,
	            splitNumber: 1,
	            axisLine: {
	              show: false,
	              lineStyle: {
	                width: 3,
	                opacity: 0
	              }
	            },
	            title: { show: false },
	            detail: { show: false },
	            splitLine: { show: false },
	            axisTick: {
	              length: 27,
	              splitNumber: Math.ceil((1 - value) * splitCount),
	              lineStyle: {
	                color: '#001242',
	                width: 3
	              }
	            },
	            axisLabel: { show: false },
	            pointer: { show: false },
	            itemStyle: {},
	            
	            data: [
	              {
	                value: value,
	                name: 'test gauge'
	              }
	            ]
	          },
	          {
	            type: 'gauge',
	            radius: '90%',
	            startAngle: startAngle,
	            endAngle: pointerAngle,
	            splitNumber: 1,
	            axisLine: {
	              show: false,
	              lineStyle: {
	                width: 3,
	                opacity: 0
	              }
	            },
	            title: { show: false },
	            detail: { show: false },
	            splitLine: { show: false },
	            axisTick: {
	                          length: 20,
	                          splitNumber: 7,
	                          lineStyle: {
	                            color: '#c8000a',
	                            width: 3
	                          }
	                        },
	            axisLabel: { show: false },
	            pointer: { show: false },
	            itemStyle: {},
	            data: [
	              {
	                value: value,
	                name: 'test gauge'
	              }
	            ]
	          },
	          {
	            type: 'gauge',
	            radius: '95%',
	            startAngle: pointerAngle,
	            endAngle: pointerAngle,
	            splitNumber: 1,
	            axisLine: {
	              show: false,
	              lineStyle: {
	                width: 3,
	                opacity: 0
	              }
	            },
	            title: { show: false },
	            detail: { show: false },
	            splitLine: { show: false },
	            axisTick: {
	              length: 20,
	              splitNumber: 1,
	              lineStyle: {
	                color: "#3a712d",
	                width: 3
	              }
	            },
	            axisLabel: { show: false },
	            pointer: { show: false },
	            itemStyle: {},
	            data: [
	              {
	                value: value,
	                name: 'test gauge'
	              }
	            ]
	          }
	        ]
}

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>
    